import { UIPanel, UIRow, UIHorizontalRule } from './lib/ui.js';

function MenubarView( editor ) {

	var strings = editor.strings;

	var container = new UIPanel();
	container.setClass( 'menu' );

	var title = new UIPanel();
	title.setClass( 'title' );
	title.setTextContent( strings.getKey( 'menubar/view' ) );
	container.add( title );

	var options = new UIPanel();
	options.setClass( 'options' );
	container.add( options );


	var option = new UIRow();
	option.setClass( 'option' );
	// option.setTextContent( strings.getKey( 'menubar/view/grid' ) );
    var cnName = strings.getKey( 'menubar/view/grid');
    if (editor.viewGrid) {
        cnName += ' √';
    }
    option.setTextContent(cnName);
	option.onClick(function() {
        let cnName = strings.getKey( 'menubar/view/grid');
        if (!editor.viewGrid) {
            cnName += ' √';
        }
		editor.viewGrid = !editor.viewGrid;
        this.setTextContent(cnName);
	});
	options.add( option );


	var option = new UIRow();
	option.setClass( 'option' );
    var cnName = strings.getKey( 'menubar/view/rule');
    if (editor.viewRule) {
        cnName += ' √';
    }
    option.setTextContent(cnName);
	// option.setTextContent( strings.getKey( 'menubar/view/rule' ) );
    option.onClick(function() {
        let cnName = strings.getKey( 'menubar/view/rule');
        if (!editor.viewRule) {
            cnName += ' √';
        }
        this.setTextContent(cnName);
		editor.viewRule = !editor.viewRule;
        // √
	});
	options.add( option );

    var option = new UIRow();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/view/referenceLine' ) );
    options.add( option );

	var hr = new UIHorizontalRule();
	options.add(hr);

	var option = new UIRow();
	option.setClass( 'option' );
    option.setClass('inactive');
	option.setTextContent( strings.getKey( 'menubar/view/zoomIn' ) );
	options.add( option );

	var option = new UIRow();
	option.setClass( 'option' );
    option.setClass('inactive');
	option.setTextContent( strings.getKey( 'menubar/view/zoomOut' ) );
	options.add( option );


	var hr = new UIHorizontalRule();
	options.add(hr);

	// Fullscreen

	var option = new UIRow();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/view/fullscreen' ) );
	option.onClick( function () {

		if ( document.fullscreenElement === null ) {

			document.documentElement.requestFullscreen();

		} else if ( document.exitFullscreen ) {

			document.exitFullscreen();

		}

		// Safari

		if ( document.webkitFullscreenElement === null ) {

			document.documentElement.webkitRequestFullscreen();

		} else if ( document.webkitExitFullscreen ) {

			document.webkitExitFullscreen();

		}

	} );
	options.add( option );

	// VR (Work in progress)

	if ( 'xr' in navigator ) {

		navigator.xr.isSessionSupported( 'immersive-vr' )
			.then( function ( supported ) {

				if ( supported ) {

					var option = new UIRow();
					option.setClass( 'option' );
					option.setTextContent( 'VR' );
					option.onClick( function () {

						editor.signals.toggleVR.dispatch();

					} );
					options.add( option );

				}

			} );

	}

	return container;

}

export { MenubarView };
